<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">{{ data.text }}</span>
            <div class="editor-title__sub-text">秒杀时间请前往设置-交易设置-秒杀时间<span class="editor-sub-span" @click="toConfig">去配置</span></div>
        </div>

        <div class="img-btn-con">
            <div class="editor-two__item" style="margin-bottom: 0">
                <div class="editor-two__item-head">标题名称</div>
                <el-input v-model="data.data.skill_name" maxlength="6" placeholder="输入标题名称，最长6个字" clearable />
            </div>
            <div class="editor-two__item" style="margin-bottom: 1rem">
                <div class="editor-two__item-head">按钮文本</div>
                <el-input v-model="data.data.btn_name" maxlength="4" placeholder="输入按钮文本内容，最长4个字" clearable />
            </div>
            <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con">商品数量</div>
                <div class="cls-between" style="width: 108px">
                    <el-input
                        v-model="data.data.reqData.limit"
                        oninput="value=value.replace(/[^\d]/g,'')"
                        placeholder="输入商品数量"
                        clearable
                        @input="changeLimit"
                    />
                </div>
            </div>

            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">标题颜色</div>
                <div>
                    <el-color-picker v-model="data.style.head_color" @change="color_change('head_color', '#fff')" />
                </div>
            </div>
            <!-- <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">商品标题行数</div>
                <div class="cls-between">
                    <div class="item-con" :class="data.style.titleMore == 1 ? 'item-con-active' : ''"
                        @click="data.style.titleMore = 1">一行</div>
                    <div class="item-con" :class="data.style.titleMore == 2 ? 'item-con-active' : ''"
                        @click="data.style.titleMore = 2">两行</div>
                </div>
            </div> -->
            <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">商品文本样式</div>
                <div class="cls-between">
                    <div class="item-con" :class="data.style.weight == 500 ? 'item-con-active' : ''" @click="data.style.weight = 500">常规</div>
                    <div class="item-con" :class="data.style.weight > 500 ? 'item-con-active' : ''" @click="data.style.weight = 600">加粗</div>
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">进度条颜色</div>
                <div>
                    <el-color-picker v-model="data.style.proColor" @change="color_change('proColor', '#fff')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">进度条轨道颜色</div>
                <div>
                    <el-color-picker v-model="data.style.proBg" @change="color_change('proBg', '#fff')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 0.5rem">
                <div class="label-con" style="flex: 1">供应商信息</div>
                <div>
                    <el-switch v-model="data.style.showSupp" width="60px" size="large" inline-prompt active-text="显示" inactive-text="隐藏" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">购买按钮</div>
                <div>
                    <el-switch v-model="data.style.showBuy" width="60px" size="large" inline-prompt active-text="显示" inactive-text="隐藏" />
                </div>
            </div>
            <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">购买按钮样式</div>
                <div class="cls-between">
                    <div class="item-con" :class="!data.style.btnRound ? 'item-con-active' : ''" @click="data.style.btnRound = false">默认</div>
                    <div class="item-con" :class="data.style.btnRound ? 'item-con-active' : ''" @click="data.style.btnRound = true">圆角</div>
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">价格颜色</div>
                <div>
                    <el-color-picker v-model="data.style.price_color" @change="color_change('price_color', '#0ac393')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">页面边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-left']" :max="max" @change="padding_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model="data.rpxStyle['margin-left']" @input="padding_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">圆角距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['border-radius']" :max="max" @change="radius_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['border-radius']" @input="radius_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-top']" :min="0" :max="300" @change="mtt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-top']" @input="mtt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-bottom']" :min="0" :max="300" @change="mtb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-bottom']" @input="mtb_change" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
const { proxy } = getCurrentInstance()

const max = 16 // 最大值，适用于内外边距和圆角

/**
 * 标签商品
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 14,
            type_name: "skill",
            text: "秒杀专区",
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
                skill_name: "限时秒杀",
                btn_name: "立即抢",
            },
        },
    },
})

onMounted(() => {
    req_pdc()
})

function req_pdc() {
    proxy.$axios1
        .get(`${props.data.data.reqUrl}?limit=${props.data.data.reqData.limit || 6}`)
        .then((r) => {
            let res = r.data
            if (res.code == 0) {
                res.data.map((val) => {
                    val.img = proxy.imgUrl + val.product_img + "!img_400"
                })
                props.data.data.data = res.data
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

const changeLimit = (val) => {
    req_pdc()
}

const padding_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["margin-left"] = props.data.rpxStyle["margin-right"] = Number(val)
}

// 圆角变化
const radius_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["border-radius"] = Number(val)
}

// 上下边距
const mtt_change = (val) => {
    props.data.rpxStyle["margin-top"] = Number(val)
}
const mtb_change = (val) => {
    props.data.rpxStyle["margin-bottom"] = Number(val)
}
/**
 * 当点击清空颜色时，恢复默认颜色
 * @param {*} key 要修改的颜色字段
 * @param {*} color 默认颜色， 当key值为null时，恢复默认颜色
 */
const color_change = (key, color) => {
    if (!props.data.style[key]) {
        props.data.style[key] = color
    }
}

const toConfig = () => {
    window.open("#/Setup/TransactionSetup", "_blank")
}
</script>

<style lang="less" scoped>
.editor-sub-span {
    margin-left: 10px;
    color: #4b93fa;
    cursor: pointer;
}

.editor-two__item {
    margin-bottom: 20px;

    .editor-two__item-head {
        color: #333;
        line-height: 46px;
    }
}

.editor-title__name {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
}

.img-btn-con {
    background-color: #fff;
    padding: 16px;
    /* margin: 16px; */
}

.item-con {
    color: #323232;
    padding: 7px 14px;
    border: 1px solid #ebedf0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: #969799;
}
</style>
